<template>
  <div>
    <!--树的弹出框-->
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30px;">
      <el-tree :data="goodstyle" node-key="id" @current-change="handleNodeClick1"></el-tree>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改商品 -->
    <el-dialog
      append-to-body
      title="修改商品"
      :visible.sync="dialogFormVisible2"
      width="700px"
      class="dialog"
      @close="cleargoods"
    >
      <el-form inline :model="goods">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <p>商品信息</p>
          </div>
          <div class="text item">
            <el-form-item label="所属类别:">
              <el-input size="mini" v-model="goods.typeName" disabled></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="text" icon="el-icon-folder-opened" @click="dialogVisible=true"></el-button>
            </el-form-item>
            <el-form-item label="商品编号:">
              <el-input size="mini" v-model="goods.code"></el-input>
            </el-form-item>
            <el-form-item label="商品名称:">
              <el-input size="mini" v-model="goods.name"></el-input>
            </el-form-item>
            <el-form-item label="商品型号:">
              <el-input size="mini" v-model="goods.model"></el-input>
            </el-form-item>
            <el-form-item label="单位:">
              <el-input size="mini" v-model="goods.unit"></el-input>
            </el-form-item>
            <el-form-item label="采购价:">
              <el-input size="mini" v-model="goods.purchasingPrice"></el-input>
            </el-form-item>
            <el-form-item label="销售价:">
              <el-input size="mini" v-model="goods.sellingPrice"></el-input>
            </el-form-item>
            <el-form-item label="库存下限:">
              <el-input size="mini" v-model="goods.minNum"></el-input>
            </el-form-item>
            <el-form-item label="生产厂商:">
              <el-input size="mini" v-model="goods.producer"></el-input>
            </el-form-item>
            <el-form-item label="备注:">
              <el-input
                size="mini"
                type="textarea"
                :rows="3"
                placeholder="请输入内容"
                v-model="goods.remarks"
                style="width:500px;"
              ></el-input>
            </el-form-item>
          </div>
          <div class="card_bottom">
            <el-form-item style="float:right">
              <el-button type="success" size="mini" @click="upgoods">修改</el-button>
            </el-form-item>
          </div>
        </el-card>
      </el-form>
    </el-dialog>
    <!-- 添加商品 -->
    <el-dialog
      append-to-body
      title="添加商品"
      :visible.sync="dialogFormVisible1"
      width="700px"
      class="dialog"
      @close="cleargoods"
    >
      <el-form inline :model="goods">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <p>商品信息</p>
          </div>
          <div class="text item">
            <el-form-item label="所属类别:">
              <el-input size="mini" v-model="goods.typeName" disabled></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="text" icon="el-icon-folder-opened" @click="dialogVisible=true"></el-button>
            </el-form-item>

            <el-form-item label="商品编号:">
              <el-input size="mini" v-model="goods.code"></el-input>
            </el-form-item>
            <el-form-item label="商品名称:">
              <el-input size="mini" v-model="goods.name"></el-input>
            </el-form-item>
            <el-form-item label="商品型号:">
              <el-input size="mini" v-model="goods.model"></el-input>
            </el-form-item>
            <el-form-item label="单位:">
              <el-input size="mini" v-model="goods.unit"></el-input>
            </el-form-item>
            <el-form-item label="采购价:">
              <el-input size="mini" v-model="goods.purchasingPrice"></el-input>
            </el-form-item>
            <el-form-item label="销售价:">
              <el-input size="mini" v-model="goods.sellingPrice"></el-input>
            </el-form-item>
            <el-form-item label="库存下限:">
              <el-input size="mini" v-model="goods.minNum"></el-input>
            </el-form-item>
            <el-form-item label="生产厂商:">
              <el-input size="mini" v-model="goods.producer"></el-input>
            </el-form-item>
            <el-form-item label="备注:">
              <el-input
                size="mini"
                type="textarea"
                :rows="3"
                placeholder="请输入内容"
                v-model="goods.remarks"
                style="width:500px;"
              ></el-input>
            </el-form-item>
          </div>
          <div class="card_bottom">
            <el-form-item style="float:right">
              <el-button type="success" size="mini" @click="addgoods">添加</el-button>
            </el-form-item>
          </div>
        </el-card>
      </el-form>
    </el-dialog>
    <el-container>
      <el-container>
        <el-aside width="200px">
          <el-header style="height:30px;border:none;">
            <b>商品类别</b>
          </el-header>
          <el-tree :data="goodstyle" node-key="id" @current-change="handleNodeClick"></el-tree>
        </el-aside>
        <el-container>
          <el-main>
            <p style="text-align:left;margin-top:-15px;">
              <b>选择商品</b>
            </p>

            <el-form :model="pagination1" style="float:left;" inline>
              <el-form-item label="商品:">
                <el-input size="mini" v-model="pagination1.name"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button
                  type="success"
                  size="mini"
                  round
                  icon="el-icon-search"
                  @click="getgoods"
                >查询</el-button>
              </el-form-item>
              <el-form-item>
                <el-button
                  type="text"
                  icon="el-icon-circle-plus-outline"
                  @click="dialogFormVisible1=true"
                >添加</el-button>
                <el-button type="text" icon="el-icon-setting" @click="dialogFormVisible2=true">修改</el-button>
                <el-button type="text" icon="el-icon-delete" @click="delgoods">删除</el-button>
              </el-form-item>
            </el-form>

            <el-table
              ref="singleTable"
              :data="goodslist"
              highlight-current-row
              style="width: 100%"
              @row-click="clickgood"
              @row-dblclick="goodtabledouble"
            >
              <el-table-column type="index" width="50"></el-table-column>
              <el-table-column property="code" label="商品编号" width="120"></el-table-column>
              <el-table-column property="name" label="商品名称" show-overflow-tooltip></el-table-column>
              <el-table-column property="model" label="型号" width="120"></el-table-column>
              <el-table-column property="unit" label="单位" width="120"></el-table-column>
              <el-table-column property="purchasingPrice" label="成本均价" width="120"></el-table-column>
              <el-table-column property="sellingPrice" label="销售单价" width="120"></el-table-column>
              <el-table-column property="inventoryQuantity" label="库存数量" width="120"></el-table-column>
            </el-table>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pagination1.pageNum"
              :page-sizes="[3, 4, 5, 6]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pagination1.total"
            ></el-pagination>
          </el-main>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>
<script>
var $this;
var id = {};
export default {
  data() {
    return {
      good: {},
      goodstyle: [], //商品类型集合
      goodslist: [], //商品集合
      pagination1: {}, //分页+商品模糊
      goods: {},
      dialogFormVisible1: false,
      dialogFormVisible2: false,
      dialogVisible: false
    };
  },

  mounted() {
    this.gettreedata();
    this.getGoodsList(1, 5);
  },
  methods: {
    handleNodeClick1(data, node) {
      this.goods.typeId = data.id;
      this.goods.typeName = data.label;
    },
    delgoods() {
      this.goods.access_token=localStorage.getItem("access_token");
      this.goods.ids=[this.goods.id]
      this.axios({
        method:'post',
        url: this.requestUrl+"basic/basic/tGoods/del",
        data: this.qs.stringify(this.goods)
      }).then(res=>{
        console.log("删除信息",res.data.msg)
        this.getGoodsList(this.pagination1.pageNum,this.pagination1.pageSize);
      })
    },
    handleNodeClick(data, node) {
      console.log("选中树节点的信息", data);
      if (data.id == 1) {
        this.pagination1.typeId = 0;
      } else {
        this.pagination1.typeId = data.id;
      }
      this.getGoodsList(1, 5);
    },
    handleSizeChange(val) {
      this.getGoodsList(this.pagination1.pageNum, val);
    },
    handleCurrentChange(val) {
      this.getGoodsList(val, this.pagination1.pageSize);
    },
    gettreedata() {
      this.axios({
        method: "get",
        url: this.requestUrl + "inventory/inventory/tGoodstype/tree",
        params: {
          access_token: localStorage.getItem("access_token")
        }
      }).then(res => {
        console.log("获取的tree数据", res.data.obj);
        this.goodstyle = res.data.obj;
      });
    },
    addgoods() {
      this.goods.lastPurchasingPrice = this.goods.purchasingPrice;
      this.goods.access_token = localStorage.getItem("access_token");
      this.axios({
        method: "get",
        url: this.requestUrl + "basic/basic/tGoods/add",
        params: this.goods
      }).then(res => {
        console.log("添加返回结果为", res.data.msg);
        this.getGoodsList(this.pagination1.pageNum, this.pagination1.pageSize);
        this.dialogFormVisible1 = false;
      });
    },
    upgoods() {
      this.goods.access_token = localStorage.getItem("access_token");
      this.axios({
        method: "get",
        url: this.requestUrl + "basic/basic/tGoods/up",
        params: this.goods
      }).then(res => {
        console.log("修改返回结果为", res.data.msg);
        this.getGoodsList(this.pagination1.pageNum, this.pagination1.pageSize);
        this.dialogFormVisible2 = false;
      });
    },
    cleargoods() {
      this.goods = {};
    },
    getGoodsList(pageNum, pageSize) {
      this.pagination1.pageNum = pageNum;
      this.pagination1.pageSize = pageSize;
      this.pagination1.access_token = localStorage.getItem("access_token");
      this.axios({
        method: "get",
        url: this.requestUrl + "basic/basic/tGoods/list",
        params: this.pagination1
      }).then(res => {
        console.log("获取的商品信息", res.data.obj);
        this.goodslist = res.data.obj.list;
        this.pagination1.total = res.data.obj.total;
      });
    },
    getgoods() {
      this.getGoodsList(1, 5);
    },
    clickgood(row, column, event) {
      this.goods = JSON.parse(JSON.stringify(row));
    },
    goodtabledouble(row, column, event) {
      this.goods = JSON.parse(JSON.stringify(row));
      this.dialogFormVisible2 = true;
    }
  }
};
</script>
<style scoped>
.el-header,
.el-footer {
  background-color: rgba(69, 106, 209, 0.1);
  display: flex;
  flex-direction: column; /*元素的排列方向为垂直*/
  justify-content: center; /*水平居中对齐*/
  align-items: left;
  font-size: 15px;
  border: 2px solid rgba(69, 106, 209, 0.5);
}

.el-aside {
  text-align: left;
  height: 475px;
  border: 2px solid rgba(69, 106, 209, 0.5);
}

.el-main {
  text-align: center;
  height: 475px;
  border: 2px solid rgba(69, 106, 209, 0.5);
}
</style>